{{ block title }}
    
{{ endblock }}
{{ block content }}
<p>以下の文を読み、その状況がどの程度不快と感じるかお答えください。
</p>

<div id='shuffle'>
    <div>あなたは来月に同窓会を控えています。
        そのためにダイエットを始めたところです。
        しかし、同窓会の前日に大学のサークルの人たちと飲み会をすることになりました。
        あなたはお酒を飲むことがすきだけど、とても太りやすい体質です。
        飲み会がある日は暇で行くことができます。<br>
        行きたくない <input type="range" name="KQ1" id="KQ1" min="0" max="100" value="50"> 行きたい
    </div>
    <br>
    <div>あなたは来月に同窓会を控えています。
        そのためにダイエットを始めたところです。
        しかし、同窓会の前日に大学のサークルの人たちと飲み会をすることになりました。
        あなたはお酒を飲むことがすきだけど、とても太りやすい体質です。
        この飲み会は、先輩の送別会になっていて、断ることができません。<br>
        行きたくない <input type="range" name="KQ2" id="KQ2" min="0" max="100" value="50"> 行きたい
    </div>
    <br>
    <div>あなたは今アルバイトを終え、くたくたになりながら帰宅したところです。
        バイトの先輩から明日バイトを代わって欲しいという連絡がありました。
        あなたは明日一日暇で代わることはできます。<br>
        引き受けたくない <input type="range" name="KQ3" id="KQ3" min="0" max="100" value="50"> 引き受けたい
    </div>
    <br>
    <div>あなたは今アルバイトを終え、くたくたになりながら帰宅したところです。
        バイトの先輩から明日の朝のシフトのバイトを代わって欲しいという連絡がありました。
        バイトの先輩は明日あなたが暇であることを知っており、断るのが難しい状況です。<br>
        引き受けたくない <input type="range" name="KQ4" id="KQ4" min="0" max="100" value="50"> 引き受けたい
    </div>
    <br>
    <div>あなたは家までの一本道を歩いていました。
        街頭のあたりで上を向くと、大量の虫が集っていました。
        このまま直進して下を通れば近道だが、遠回り（15分）して回避することもできます。<br>
        不快 <input type="range" name="KQ5" id="KQ5" min="0" max="100" value="50"> 不快じゃない
    </div>
    <br>
    <div>あなたは家までの一本道を歩いていました。
        街頭のあたりで上を向くと、大量の虫が集っていました。
        このまま直進して下を通らなければ家にたどり着けません。<br>
        不快 <input type="range" name="KQ6" id="KQ6" min="0" max="100" value="50"> 不快じゃない
    </div>
</div>

    {{ next_button }}


    <style>
        html h3 {
          color: #aaa;
          font-weight: 500;
        }
        
        html h4 {
          color: #999;
          font-weight: 500;
        }
        
        html h4:after {
          content: "%";
          padding-left: 1px;
        }
        
        html input[type="range"] {
          outline: 0;
          border: 0;
          border-radius: 500px;
          width: 400px;
          max-width: 100%;
          margin: 24px 0 16px;
          -webkit-transition: -webkit-box-shadow 0.2s ease-in-out;
          transition: -webkit-box-shadow 0.2s ease-in-out;
          transition: box-shadow 0.2s ease-in-out;
          transition: box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
        }
        
        @media screen and (-webkit-min-device-pixel-ratio: 0) {
          html input[type="range"] {
            overflow: hidden;
            height: 40px;
            -webkit-appearance: none;
            background-color: #ddd;
          }
          html input[type="range"]::-webkit-slider-runnable-track {
            height: 40px;
            -webkit-appearance: none;
            color: #444;
            -webkit-transition: -webkit-box-shadow 0.2s ease-in-out;
            transition: -webkit-box-shadow 0.2s ease-in-out;
            transition: box-shadow 0.2s ease-in-out;
            transition: box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
          }
          html input[type="range"]::-webkit-slider-thumb {
            width: 40px;
            -webkit-appearance: none;
            height: 40px;
            cursor: ew-resize;
            background: #fff;
            -webkit-box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 40px #1597ff;
                    box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 40px #1597ff;
            border-radius: 50%;
            -webkit-transition: -webkit-box-shadow 0.2s ease-in-out;
            transition: -webkit-box-shadow 0.2s ease-in-out;
            transition: box-shadow 0.2s ease-in-out;
            transition: box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
            position: relative;
          }
          html input[type="range"]:active::-webkit-slider-thumb {
            background: #fff;
            -webkit-box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 3px #1597ff;
                    box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 3px #1597ff;
          }
        }
        
        html input[type="range"]::-moz-range-progress {
          background-color: #43e5f7;
        }
        
        html input[type="range"]::-moz-range-track {
          background-color: #9a905d;
        }
        
        html input[type="range"]::-ms-fill-lower {
          background-color: #43e5f7;
        }
        
        html input[type="range"]::-ms-fill-upper {
          background-color: #9a905d;
        }
        
        #h4-container {
          width: 400px;
          max-width: 100%;
          padding: 0 20px;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
          position: relative;
        }
        
        #h4-container #h4-subcontainer {
          width: 100%;
          position: relative;
        }
        
        #h4-container #h4-subcontainer h4 {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          position: absolute;
          top: 0;
          width: 40px;
          height: 40px;
          color: #fff !important;
          font-size: 12px;
          -webkit-transform-origin: center -10px;
                  transform-origin: center -10px;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%);
          -webkit-transition: margin-top 0.15s ease-in-out, opacity 0.15s ease-in-out;
          transition: margin-top 0.15s ease-in-out, opacity 0.15s ease-in-out;
        }
        
        #h4-container #h4-subcontainer h4 span {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background-color: #1597ff;
          border-radius: 0 50% 50% 50%;
          -webkit-transform: rotate(45deg);
                  transform: rotate(45deg);
          z-index: -1;
        }
        
        input:not(:active) + #h4-container h4 {
          opacity: 0;
          margin-top: -50px;
          pointer-events: none;
        }
        /*# sourceMappingURL=slider.css.map */
        </style>
        
        <script>
            $(function () {
                var parent = $("#shuffle");
                var divs = parent.children();
                while(divs.length) {
                    parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
                }
            });
        
            $(function() {
          var rangePercent = $('[type="range"]').val();
          $('[type="range"]').on('change input', function() {
            rangePercent = $('[type="range"]').val();
            $('h4').html(rangePercent+'<span></span>');
            $('[type="range"], h4>span').css('filter', 'hue-rotate(-' + rangePercent + 'deg)');
            // $('h4').css({'transform': 'translateX(calc(-50% - 20px)) scale(' + (1+(rangePercent/100)) + ')', 'left': rangePercent+'%'});
            $('h4').css({'transform': 'translateX(-50%) scale(' + (1+(rangePercent/100)) + ')', 'left': rangePercent+'%'});
          });
        });
        
        </script>

{{ endblock }}